import React,{useState,useEffect} from 'react';
import { Column   } from '@ant-design/charts';
import {PageContainer} from "@ant-design/pro-layout";
import { Button,Card} from 'antd';
import  Progress from  './RingProgress'
import  HomeStatistic from  './Statistic'
export  default  ()=>{
  const  [progess,setProgess] =useState(0);
  const  [dataArray,setDataArray] =useState( [
    {
      type: '家具家电',
      sales: 38,
    },
    {
      type: '粮油副食',
      sales: 52,
    },
  ]);
  useEffect(()=>{
    setInterval(()=>{
      setProgess(progess+0.01)
    },2000)
  })
  useEffect(()=>{
    setInterval(()=>{
      const aray = [...dataArray];
      aray.push(   {
        type: `'粮油副食'${Math.random()}`,
          sales: 52,
      })
      setDataArray(aray)
    },5000)
  })
  const  config = {
    data:dataArray,
    xField: 'type',
    yField: 'sales',
    label: {
      position: 'middle',
      style: {
        fill: '#FFFFFF',
        opacity: 0.6,
      },
    },
    meta: {
      type: { alias: '类别' },
      sales: { alias: '销售额' },
    },
  };
  const  relodProgess = ()=>{
    setProgess(progess+0.1)
  }

  const  tile =  <Progress progess={progess}></Progress>

  const  extra =  <Button type='primary' onClick={relodProgess}>刷新</Button>

  return  <PageContainer>
    <HomeStatistic></HomeStatistic>

    <Card title={tile} extra={extra}>
    </Card>
    <Column  {...config} />
    </PageContainer>
}
